<template>
  <div>
    <el-cascader :size="cascaderSize" :options="options" v-model="selectedOptions" @change="handleChange" style="width:100%" />
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'CityCascader',
  props: {
    selOptions: {
      type: [Array,String,Object],
      default: null
    },
    cascaderSize: {
      tyep: String,
      default: 'large' // small
    }
  },
  watch: {
    selOptions: {
      immediate: true,
      handler(val) {
        if(val && val.value1) {
          const value2 = val.value2 + '0000'
          const value3 = val.value2 + val.value3 + '00'
          const value4 = val.value2 + val.value3 + val.value4
          this.selectedOptions = [value2, value3, value4]
        }
      }
    }
  },
  data () {
    return {
      options: regionData,
      selectedOptions: []
    }
  },
  methods: {
    handleChange (value) {
      this.getCodeToText(value)
    },
    getCodeToText (codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      this.$emit("getCascaderData", {
        name: area,
        code: codeArray
      });
    }
  }
}
</script>